<div class="modal modal-default fade show" id="modal-files" ng-init="init()">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="mi mi-Media"></i> Media Manager</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- <div class="modal-body" style="height: calc(100vh - 143px);overflow-y: auto;"> -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-9">
                        <table class="table table-sm table-condensed mb-5">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col" width="30%">Title</th>
                                    <th scope="col" width="30%">Description</th>
                                    <th scope="col" width="20%">Full Path</th>
                                    <th scope="col" width="10%">Content</th>
                                    <th scope="col" width="5%" class="text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in data.items track by $index">
                                    <td>
                                        <input type="text" ng-model="item.title" class="form-control form-control-sm" />
                                    </td>
                                    <td>
                                        <input type="text" ng-model="item.description"
                                            class="form-control form-control-sm" />
                                    </td>
                                    <td width="15%">
                                        <div class="input-group input-group-sm">
                                            <input id="path-modal-{{$index}}" value="{{item.fullPath}}"
                                                onclick="this.select()" class="form-control form-control-sm"
                                                readonly="readonly" />
                                            <button class="btn btn-outline-secondary btn-clipboard" type="button"
                                                data-clipboard-target="#path-modal-{{$index}}">
                                                <i class="mi mi-Copy"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td width="35%">
                                        <a class="" ng-if="item.isImage" style="cursor: pointer"
                                            ng-click="togglePreview(item)">
                                            <img class="rounded" ng-src="{{item.fullPath}}"
                                                ng-class="{preview: item.isPreview}" />
                                        </a>
                                        <a ng-if="!item.isImage && item.fullPath" href="{{item.fullPath}}"
                                            target="_blank">View</a>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
                                            <!-- TODO: Hoang to check save function -->
                                            <a ng-click="save(item)" class="btn btn-sm">
                                                <span class="fas fa-save text-info"></span>
                                            </a>
                                            <a ng-click="remove(item.id)" class="btn btn-sm">
                                                <span class="fas fa-trash-alt text-danger"></span>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <paging class="small col-md-5" page="data.page" page-size="data.pageSize"
                            total="data.totalItems" ul-class="pagination justify-content-end m-0" a-class="page-link"
                            paging-action="getList(page-1)" scroll-top="true"></paging>
                    </div>
                    <div class="col-md-3 mb-3 px-5">
                        <h6>Filter</h6>
                        <!-- TODO: Hoang to check search column not work when search by title -->
                        <filter-list request="request" callback="getList(pageIndex)"></filter-list>
                        <div class="mb-5"></div>
                        <media-upload on-update="getList()"></media-upload>
                    </div>
                </div>
            </div>
            <!-- <div class="modal-footer">

                <div class="col-md-12">
                </div>
            </div> -->
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>